<!-- 
  @name: 我的积分
  @date: 2020.1.6
 -->
<template>
	<view class="content">
		<ym-navbar :immersive="true" title="我的积分" :scrollTop="scrollTop"></ym-navbar> 
		<view class="fixed_top">
			<!-- 顶部背景图 -->
			<view class="top">
				<view class="tip">
					<text class="t1">当前积分</text>
					<text class="icon">?</text>
					<text @tap="showPopup = true">积分说明</text>
				</view>
				<view class="more">
					<text class="num">{{integral}}</text>
					<button
						class="btn"
						@tap="$navigateTo('./exchange')">兑换</button>
				</view>
			</view>
			
			<!-- 选项卡 -->
			<tab-card :tab-list="tabList" @click-item="onClickItem"></tab-card>
			<view class="separate_line"></view>
		</view>
		
		<!-- 积分获取记录 -->
		<view class="gain" v-show="tabIndex === 0">
			<view class="item" v-for="(item, index) in list1" :key="item.recordId">
				<view class="left">
					<view class="play">加注</view>
					<view class="time">{{item.billTime}} {{item.billDayTime}}</view>
				</view>
				<view class="num">+{{item.integralNum}}</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 积分兑换记录 -->
		<view class="exchange" v-show="tabIndex === 1">
			<view class="item" v-for="(item, index) in list2" :key="item.recordId">
				<image class="img" :src="item.cashIcon"></image>
				<view class="msg">
					<view>{{item.cashName}}</view>
					<view class="bt">
						<text>{{item.integraAmount}} 分</text>
						<text class="rg">{{item.exchangeTime}}</text>
					</view>
				</view>
				<view class="res">兑换成功</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 积分说明弹窗 -->
		<view class="_popup center" v-if="showPopup">
			<view class="popup-info">
				<view class="tip">
					<text class="dian"></text>
					<text class="t1">积分说明</text>
					<text class="dian"></text>
				</view>
				<view class="msg">
					<text class="dian"></text>
					<view class="text">使用尿素加注小程序进行车用尿素加注时，可获得相应积分。</view>
				</view>
				<view class="msg">
					<text class="dian"></text>
					<view class="text">购买桶装尿素液，用尿素加注小程序 扫描商家二维码，获取相应积分。</view>
				</view>
				<view class="msg">
					<text class="dian"></text>
					<view class="text">积分可用于兑换现金券。</view>
				</view>
				<button class="btn_submit_popup" @tap="showPopup = false">确定</button>
			</view>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	import ymNavbar from "@/components/ym-navbar/ym-navbar.vue";
	export default {
		components:{ymNavbar},
		data() {
			return {
				showPopup: false,  //是否显示弹窗
				tabList: ['获取记录', '兑换记录'],  //选项卡
				tabIndex: 0,  //选项卡初始面板
				list1: [],  //获取记录
				page1: 1,  //获取记录页码
				list2: [],  //兑换记录
				page2: 1,  //兑换记录页码
				pointNum: true,  //是否根据请求的内容刷新积分
				scrollTop: 0
			}
		},
		computed: {
			//积分总额
			integral() {
				return this.$store.state.integral;
			}
		},
		onLoad() {
			this.getList(1);
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList(this.tabIndex + 1);
		},
		onPullDownRefresh() {
			this.reLogin();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//重新登录
			reLogin() {
				switch(this.tabIndex) {
					case 0: this.list1 = []; this.page1 = 1; break;
					case 1: this.list2 = []; this.page2 = 1; break;
				}
				this.getList(this.tabIndex + 1);
			},
			//点击选项卡
			onClickItem(index) {
				if(this.tabIndex !== index) {
					this.tabIndex = index;
					if(index === 1 && this.page2 === 1) {
						this.getList(this.tabIndex + 1);
					}
					uni.pageScrollTo({ scrollTop: 0, duration: 200 });
				}
			},
			//获取记录
			getList(recordType) {
				let page = 1;
				switch(recordType) {
					case 1: page = this.page1; break;
					case 2: page = this.page2; break;
				}
				this.$http({
					url: this.$api.integralUrl + 'getmyintegral',
					data: {
						recordType: recordType,
						page: page,
						rows: this.$tmp.ROWS_RET
					},
					loading: page > 1 ? 0 : 1
				}).then(res => {
					let arr = [];
					switch(recordType) {
						case 1: arr = res.lstRecords; break;
						case 2: arr = res.lstExchanges; break;
					}
					if(arr && arr.length > 0){
						switch(recordType) {
							case 1: this.list1 = this.list1.concat(arr); this.page1 += 1; break;
							case 2: this.list2 = this.list2.concat(arr); this.page2 += 1; break;
						}
					}
					//刷新积分(只刷新一次)
					if(this.pointNum) {
						this.pointNum = false;
						this.$store.commit('setIntegral', res.totalIntegral);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部背景图 */
	.top {
		width: 750rpx;
		height: 340rpx;
		border: 1rpx solid rgba(0,0,0,0);
		background-image: url('../static/wxImage/bg-points.png');
		.tip {
			width: 100%;
			margin-top: 180rpx;
			padding-left: 132rpx;
			padding-right: 124rpx;
			color: $color-white;
			font-size: 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.t1 {
				width: 300rpx;
			}
			.icon {
				width: 32rpx;
				height: 32rpx;
				line-height: 30rpx;
				text-align: center;
				margin-right: 11rpx;
				color: $color-primary;
				font-size: 20rpx;
				background-color: $color-white;
				border-radius: $border-radius-circle;
				margin-left: 10rpx;
			}
		}
		.more {
			width: 100%;
			margin-top: 20rpx;
			padding: 0 130rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.num {
				width: 300rpx;
				font-size: 60rpx;
				color: $color-white;
				font-family: $font-family-num;
			}
			.btn {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: $color-primary;
				border-radius: 8rpx;
				background-color: $color-white;
			}
		}
	}
	
	.gain,
	.exchange {
		width: 750rpx;
		height: auto;
		margin-top: $spacing-col + $tab-card-heg + 340rpx;
		background-color: $color-white;
	}
	/* 积分获取记录 */
	.gain {
		.item {
			margin: 0 60rpx;
			padding: 30rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid $color-list;
			.left {
				flex: 1;
				.play {
					color: $color-grey-dark;
				}
				.time {
					margin-top: 27rpx;
					color: $color-grey;
					font-family: $font-family-num;
				}
			}
			.num {
				font-size: 36rpx;
				font-family: $font-family-num;
			}
		}
	}
	
	/* 积分兑换记录 */
	.exchange {
		.item {
			margin: 0 30rpx;
			padding: 30rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid $color-list;
			.img {
				width: 90rpx;
				height: 90rpx;
				border-radius: $border-radius-circle;
				
			}
			.msg {
				flex: 1;
				padding-left: 48rpx;
				.bt {
					margin-top: 24rpx;
					color: $color-grey;
					font-family: $font-family-num;
					.rg {
						margin-left: 50rpx;
					}
				}
			}
			.res {
				color: $color-primary;
				font-weight: 500;
			}
		}
	}
	
	/* 积分说明弹窗 */
	._popup.center {
		padding-top: 0;
		justify-content: center;
	}
	.popup-info {
		width: 600rpx;
		height: 600rpx;
		background-color: $color-white;
		border-radius: $border-radius-lg;
		.dian {
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			background-color: $color-grey;
			border-radius: $border-radius-circle;
		}
		.tip {
			width: 100%;
			margin-top: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.t1 {
				margin: 0 20rpx;
				font-size: 30rpx;
			}
		}
		.msg {
			width: 100%;
			margin-top: 36rpx;
			padding-left: 40rpx;
			padding-right: 44rpx;
			display: flex;
			flex-direction: row;
			.dian {
				margin-top: 6rpx;
			}
			.text {
				flex: 1;
				line-height: 50rpx;
				margin-top: -15rpx;
				margin-left: 23rpx;
				color: $color-grey-dark;
				font-size: 24rpx;
			}
		}
		.btn_submit_popup {
			margin-top: 80rpx;
		}
	}
</style>
